<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS in JS</title>
  </head>
  <body>
    <div class="box" style="text-align: center; display: block"></div>
    <script>
      HTMLElement.prototype.styles = function (strings, ...values) {
        // 把 ${} 分割的字符串数组，
        // 后面的参数依次是 ${} 中的变量值
        // 遍历字符串数组
        let styles = "";
        for (let i = 0; i < strings.length; i++) {
          // 把字符串数组中的字符串和变量值拼接成字符串
          styles += strings[i] + (values[i] || "");
        }
        const currStyle = this.getAttribute("style");
        this.setAttribute(
          "style",
          currStyle ? currStyle + ";" + styles : styles
        );
        return this;
      };

      const styleObj = {
        color: "red",
        fontSize: 14,
        padding: 10,
        height: 40,
      };
      const a = document.createElement("div");
      const dom = document.querySelector(".box");
      dom.innerHTML = "测试";
      dom.styles`color: ${styleObj.color};font-size: ${styleObj.fontSize}px;padding: ${styleObj.padding}px;height: ${styleObj.height}px;`;

      // document.querySelector(".box").appendChild(a);
    </script>
  </body>
</html>
